<template>
    <div class="formBox">
        <el-row :gutter="24" class="w100">
            <el-col :span="9"></el-col>
            <el-col :span="6">
                <el-form ref="formRef" label-position="top" :model="state.formData" :rules="formListRules">
                    <el-form-item v-for="(item,index) in formList" :prop="item.field">
                        <label slot="label">
                            <span style="color:#f56c6c;">*</span><span
                                :class="index==0 ?'firstName':''">{{item.title}}</span>
                        </label>
                        <el-select style="width: 100%;" v-if="item.type==='select'" size="default"
                        v-model="state.formData[item.field]" filterable clearable placeholder="请选择">
                            <el-option v-for="item in item.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input style="width: 100%;" size="default" v-if="item.type==='input'"
                            v-model="state.formData[item.field]" clearable />
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="9"></el-col>
        </el-row>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect,
        defineExpose
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        formList: {
            type: Array,
            default: () => {
                return []
            }
        },
        formListRules: {
            type: Array,
            default: () => {
                return []
            }
        }
    })
    const emits = defineEmits(["vateResult"])
    // 重点
    const state = reactive({
        formData: {},
        // rules: {
        //     fieldVal: [{
        //         required: true,
        //         message: '请输入',
        //         trigger: 'blur'
        //     }],
        //     select: [{
        //         required: true,
        //         message: '请选择',
        //         trigger: 'blur'
        //     }],
        // }
    })

    const submitForm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emits('vateResult', state.formData, true)
            }
        })
    }
    watchEffect(()=>{
        props.formList.forEach(item=>{
            state.formData[item.field]=item.binddata
        })
    })
    defineExpose({
        submitForm
    });
</script>
<style lang="scss" scoped>
    .formBox {
        margin-top: 129px;
    }

    .btnSubmit {
        margin-top: 46px;
    }

    .firstName {
        font-size: 16px;
        font-weight: 700;
    }
</style>